<template>
  <div class="ac-role">
    <Layout :style="{padding: '0 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem><a href="javascript:void(0)" @click="jump('index')">首页</a></BreadcrumbItem>
        <BreadcrumbItem><a href="javascript:void(0)" @click="jump('ac')">鉴权中心</a></BreadcrumbItem>
        <BreadcrumbItem>角色</BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
        <div class="ac-header" ghost>
          <div class="ac-header-search">
            <span>搜索条件：</span>
            <Input v-model="search" placeholder="请输入角色昵称..." style="width: 300px"></Input>
            <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
          </div>
          <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
          <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
        </div>
        <div class="ac-content">
          <Table :loading="loading" :height="666"  :columns="tb_columns" :data="acRole" size="small"></Table>
          <Page :total="acRole_total" :current="acRole_current_page" :page-size="40" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
        </div>
      </Content>
    </Layout>
    <Drawer title="新增角色" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
      <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
        <FormItem label="角色名称：" prop="roleName">
          <Input v-model="addForm.roleName" placeholder="请输入角色名称..."></Input>
        </FormItem>
        <FormItem label="权限菜单：">
          <CheckboxGroup v-model="addForm.menuId">
            <Checkbox v-for="(item,key) in acMenus" :key="key" :label="item.menuName"></Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
        <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
      </div>
    </Drawer>
    <Drawer title="更新角色角色" :closable="false" v-model="updateDrawer" width="30" :mask-closable="false">
      <Form ref="updateForm" :model="updateForm" :rules="addRuleVal" :label-width="120">
        <FormItem label="角色名称："  prop="roleName">
          <Input v-model="updateForm.roleName"  placeholder="请输入角色名称..."></Input>
        </FormItem>
        <FormItem label="创建时间：" >
          <Input v-model="updateForm.createTime" disabled ></Input>
        </FormItem>
        <FormItem label="权限菜单：">
          <CheckboxGroup v-model="qxmenu">
            <Checkbox v-for="(item,key) in acMenus" :key="key" :label="item.menuName"></Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="handleSubmit2('updateForm')">提交</Button>
        <Button @click="handleReset('updateForm')" style="margin-left: 8px">取消</Button>
      </div>
    </Drawer>
  </div>


</template>

<script>
  import {mapGetters,mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";

  export default {
    name: "ac-role",
    data() {
      return {
        loading:false,
        addForm:{},
        updateForm:{},
        qxmenu:[],
        showPwd:false,
        switch1:false,
        updateDrawer:false,
        addRuleVal:{
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        },
        addDrawer:false,
        search:'',
        tb_columns: [
          {
            title: '角色ID',
            key: 'roleId',
            align: 'center'
          },
          {
            title: '角色名称',
            key: 'roleName',
            align: 'center'
          },
          {
            title: '权限菜单ID',
            key: 'menuId',
            align: 'center'
          },
          {
            title: '创建时间',
            key: 'createTime',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    icon: 'md-create',
                    size: 'small'
                  },
                  style: {
                    color: 'black',
                  },
                  on: {
                    click: () => {
                      this.toUpdate(params.row.roleId)
                    }
                  }
                }),
                h('Button', {
                  props: {
                    icon: 'md-trash',
                    size: 'small'
                  },
                  style: {
                    color: 'black',
                  },
                  on: {
                    click: () => {
                      this.toDel(params.row.roleId)
                    }
                  }
                })
              ]);
            }
          }
        ],
      }
    },
    computed: {
      ...mapGetters(['acRole','acRole_total','acRole_current_page','acRole_page_size','acMenus']),
    },
    methods: {
      ...mapActions(['getAcMenu','getAcRole']),
      toRefresh(){
        this.getAcRole({
          'search':this.search,
          'currentPage':this.acRole_current_page,
          'pageSize':this.acRole_page_size
        });
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.loading=true;
            let menus='';
            if(this.addForm.menuId && this.addForm.menuId.length>0){
              this.addForm.menuId.forEach(item=>{
                menus+=item+',';
              })
            }
            let params = {
                roleName:this.addForm.roleName,
                menuId: menus
              };
            toPost('/authentication/role/add',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '新增角色成功'
                    });
                    this.addDrawer=false;
                    this.addForm={};
                    this.toRefresh();
                    this.$refs[name].resetFields();
                  }else{
                    this.$Notice.error({
                      title: '新增角色失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                });
            this.loading=false;
          }
        })
      },
      handleSubmit2 (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
              this.loading=true;
              let menus='';
              if(this.qxmenu.length>0){
                this.qxmenu.forEach(item=>{
                  menus+=item+',';
                })
              }
              let params = {
                id:this.updateForm.roleId,
                roleName:this.updateForm.roleName,
                menus:menus,
              };
              toPost('/authentication/role/update',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '修改角色信息成功'
                    });
                    this.$refs[name].resetFields();
                    this.updateDrawer=false;
                    this.addForm={};
                    this.toRefresh();
                  }else{
                    this.$Notice.error({
                      title: '修改角色信息失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                });
              this.loading=false;
          }
        })
      },
      handleReset (name) {
        this.addDrawer=false;
        this.updateDrawer=false;
        this.addForm={};
        this.$refs[name].resetFields();
      },
      onChange(currentPage){
        this.getAcRole({
          'search':this.search,
          'currentPage':currentPage*1,
          'pageSize':this.acRole_page_size
        });
      },
      onPageSizeChange(pageSize){
        this.getAcRole({
          'search':this.search,
          'currentPage':this.acRole_current_page,
          'pageSize':pageSize*1
        });
      },
      toSearch(){
        this.getAcRole({
          'search':this.search,
          'currentPage':this.acRole_current_page,
          'pageSize':this.acRole_page_size
        });
      },
      toUpdate(id){
        this.updateForm={};
        toGet('/authentication/role/queryOne/'+id)
          .then(res=>{
            if (res.resultCode === 0) {
              this.updateForm.roleId=res.data.roleId;
              this.updateForm.roleName=res.data.roleName;
              this.updateForm.createTime=res.data.createTime;
              this.qxmenu=[];
              toGet('/authentication/role/queryAllByRoleId/'+id)
                .then(res2=>{
                  if (res2.resultCode === 0) {
                    if(res2.data[0]){
                      res2.data.forEach(item=>{
                        this.qxmenu.push(item.menuName);
                      });
                    }

                    this.updateDrawer=true;
                  }else{
                    this.$Notice.warning({
                      title: '获取该角色权限菜单失败',
                      desc: '服务器发生未知错误'
                    });
                  }
                });
            }else{
              this.$Notice.warning({
                title: '获取该角色信息失败',
                desc: '服务器发生未知错误'
              });
            }
          });
      },
      toDel(id){
        swal({
          title: "您确定删除该角色吗?",
          text: "删除该角色后，系统将删除该角色的所有信息!",
          icon: "warning",
          buttons: ["容我再想想!", "确认删除!"],
          dangerMode: true,
        })
          .then((willDelete) => {
            if (willDelete) {
              toGet('/authentication/role/delete/'+id)
                .then(res=>{
                  if (res.resultCode === 0) {
                    swal("删除成功!", {
                      icon: "success",
                    });
                    this.getAcRole({
                      'search':this.search,
                      'currentPage':1,
                      'pageSize':20
                    });
                  }
                })
                .catch(error=>{
                  swal("删除失败!", {
                    icon: "error",
                  });
                });
            }
          });
      }
    },
    mounted() {
      this.getAcMenu({
        'search':this.search,
        'currentPage':1,
        'pageSize':20
      });
      this.getAcRole({
        'search':'',
        'currentPage':1,
        'pageSize':20
      })
    }
  }
</script>

<style lang="css" scoped>

</style>

